import styled from 'styled-components';

export const Wrapper = styled.div `
    width: 18rem;
    padding-top: 0.6rem;
    margin: 4rem auto 0;
    font-size:0.7rem;
    color:#666; 
    .title-movie {
        color:black;
        font-size: 0.8rem;
        font-weight: 600;
        margin-left:0.1rem;
        margin-right: 8rem;
    }
    .card {
        padding:0.5rem 0.2rem 0;
        margin:.5rem .3rem 0;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        justify-content:space-around;
        border-radius:10%;
        border:1px solid #e5e5e5; 
        color:#666;
    }
    .card-title {
        display:flex;
        flex-direction: column;
        margin: 0.1rem 0.1rem;
    }
    .card-title p {
        margin-top: 0.3rem;
        font-size: 0.7rem;
        text-align:center
    }
    .card-title img{
        width:2.2rem;
        height:2.2rem;
    }
    .card-content {
        display: flex;
        margin-top: 0.9rem;
    }
    .card-movie {
        margin: .3rem .1rem;
        display: flex;
        height:9rem;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        width:23%;
        color:#666;
        .btn{
            margin-top:.4rem;
            color:white;
            border-color:white; 
            width: 3.7rem;
            height: 1.2rem;
            text-align: center;
            line-height: 1.2rem;
            background-color: red;
            outline-style: none;
            box-sizing: border-box;
            color: #fff;
            display: flex;
            justify-content: space-around;
            white-space: nowrap;
            font-size: .7rem;
            font-weight: 500;
            cursor: pointer;
            border-radius: 0.6rem;
            &:active {
                opacity: .3;
            }
        }

    }
    .card-content img {
        width: 4.125rem;
        margin: 0 0.1rem;
        height: 3rem;
        border-radius:10%;
    }
    .card-movie img {
        width:96%;
        margin: 0 auto;
        height: 6rem;
        border-radius:10%;
    }
`